<template>
  <!-- 顶部展示面板 -->
  <div id="weather-mode">
    <div class="weather-info">
      <div class="city-name" @click="handleColseinput">
        <span>{{ position }}</span>
        <i class="iconfont icon-linecar105"></i>
      </div>
      <div class="info-item">
        <div>{{ weatherInfo.dayWeather }}</div>
        <div>{{ weatherInfo.nightTemp }}/{{ weatherInfo.dayTemp }}℃</div>
      </div>
    </div>
  </div>
  <!-- 搜索城市面板 -->
  <Transition>
    <div class="weather-input" v-show="showSearch">
      <el-input
        type="text"
        v-model="searchCity"
        placeholder="请输入城市名称"
        :prefix-icon="Search"
        @keyup.enter="searchCityHandle"
      />
      <i class="iconfont icon-chahao" @click="handleColseinput"></i>
    </div>
  </Transition>
</template>

<script setup>
import { ref, inject, watchEffect, onMounted, onUnmounted } from 'vue';
import { Search } from '@element-plus/icons-vue';
// 高德地图API加载
import AMapLoader from '@amap/amap-jsapi-loader';

// 存储查询到的天气信息
const weatherInfo = ref({});
// 存放位置信息
const position = ref('');
// 查询城市内容
const searchCity = ref('');
// 控制查询面板显示id
const showSearch = ref(false);

// 实时输入内容
onMounted(async () => {
  // 加载器
  window._AMapSecurityConfig = {
    securityJsCode: '3803fef5273a37c33f6c81666572c9c4',
  };
  // 异步加载高德地图API（等待API加载完成后，在创建底图实例map）
  const AMap = await AMapLoader.load({
    key: '73e59768fece08c22145999d58cdbb7d',
    version: '2.0',
    //引入的插件列表（与api加载器一同加载⚠️）
    plugins: ['AMap.Weather', 'AMap.CitySearch'],
  });

  //===========================ip定位=================================
  var citySearch = new AMap.CitySearch();
  citySearch.getLocalCity(function (status, result) {
    console.log('ip定位中', status, result)
    if (status === 'complete' && result.info === 'OK') {
      // 查询成功，result即为当前所在城市信息
      console.log(result, '定位城市');
      position.value = result.city.slice(0, -1);

      //========================创建天气查询实例====================
      var weather = new AMap.Weather();
      //执行实时天气信息查询
      weather.getForecast(position.value, function (err, data) {
        console.log(err, data.forecasts[0]);
        //err 正确时返回 null
        //data 返回天气预报数据，返回数据见下表
        weatherInfo.value = data.forecasts[0];
        console.log(weatherInfo.value, '获取实时天气信息');
      });
    }
  });
});

// 查询城市天气
const searchCityHandle = () => {
  position.value = searchCity.value;
  showSearch.value = !showSearch.value;

  //再次查询天气
  var weather = new AMap.Weather();
  //执行实时天气信息查询
  weather.getForecast(position.value, function (err, data) {
    console.log(err, data.forecasts[0]);
    //err 正确时返回 null
    //data 返回天气预报数据，返回数据见下表
    weatherInfo.value = data.forecasts[0];
    console.log(weatherInfo.value, '获取实时天气信息');
  });
};

// 点击显示输入查询框
const handleColseinput = () => {
  showSearch.value = !showSearch.value;
};
</script>

<style lang="scss" scoped>
@import '//at.alicdn.com/t/c/font_4989585_9v11iz7qjpg.css';
// 动画
.v-enter-active {
  transition: all 0.3s ease-out; /* 淡入时间和缓动效果 */
}
.v-leave-active {
  transition: all 0.2s cubic-bezier(1, 0.5, 0.8, 1); /* 缩短移出时间至0.2s实现快速移出 */
}
.v-enter-from,
.v-leave-to {
  transform: translateY(20px); /* 将X轴变换改为Y轴变换，实现上下方向动画 */
  opacity: 0;
}

#weather-mode {
  position: absolute;
  top: 18px;
  left: 411px;
  .weather-info {
    display: flex;
    width: 160px;
    height: 43px;
    align-items: center;
    justify-content: space-around;
    border-radius: 3px;
    padding: 3px 0cqmax;
    background-color: white;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
    .city-name {
      display: flex;
      align-items: center;
      gap: 5px;

      span {
        font-weight: 500;
        color: #3d93fd;
        font-size: 15px;
      }
      .icon-linecar105 {
        font-size: 12px;
      }
    }

    .info-item {
      font-size: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
  }
}
.weather-input {
  position: absolute;
  top: 69px;
  left: 411px;
  padding: 10px 10px;
  background-color: white;
  border-radius: 3px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  gap: 10px;
  .icon-chahao {
    font-size: 13px;
  }
}
</style>
